<template>
  <!-- 用户-用户管理-用户等级树 -->
  <div>
    <el-card :bordered="false" :padding="0" class="ivu-mt" dis-hover>
      <div class="new_card_pd">
        <el-form
          ref="userGXFrom"
          :label-position="labelPosition"
          :label-width="labelWidth"
          :model="userGXFrom"
          inline
          @submit.native.prevent
        >
          <el-form-item label="ID：" label-for="id">
            <el-input
              v-model="userGXFrom.id"
              class="form_content_width"
              placeholder="请输入ID"
            />
          </el-form-item>
          <el-form-item>
            <el-button v-db-click type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card v-if="userGXData" :bordered="false" class="ivu-mt node-data" dis-hover>
      <vue2-org-tree
        ref="imageDom"
        :collapsable="collapsable"
        :data="userGXData"
        :horizontal="!horizontal"
        :label-class-name="labelClassName"
        :render-content="renderContent"
        class="utree"
      />
    </el-card>

  </div>
</template>
<script>
import {mapState} from "vuex";
import { leaderTreeApi } from "@api/agent";
export default {
  name: 'user_GX',
  props: {
  },
  data() {
    return {
      userGXFrom: {
        id: '',
        master: 1
      },
      userGXData: '',
      userGXAllData: '',
      horizontal: true,// 横版 竖版
      collapsable: false,//子节点是否可折暴的
      expandA11: true,//是否全部展开
      labelClassName: 'bg-gray',//默认颜色
      scrollTreestyle: 'width:100%;height:100%',//行内样式
      imgUr1: '',//转换base64存放
      dialogVisible: true,// 预览盒子
      dialogclick: false,
    }
  },
  created() {
    //this.getList();
  },
  computed: {
    ...mapState('admin/layout', [
      'isMobile'
    ]),
    labelWidth() {
      return this.isMobile ? undefined :"96px";
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    }
  },
  methods: {
    getList(type, uid) {
      let par = {}
      if (type === 1) {
        par.id = uid;
        par.master = 0;
      } else {
        par = this.userGXFrom;
      }

      if (!par.id) {
        return this.$message.error('请输入用户ID');
      }
      leaderTreeApi(par).then(async res => {
        let data = res.data;

        if (type === 1) {
          if (data[0].children.length === 0) {
            this.$message.error('暂无下级');
            return;
          }
          let arrAll = this.userGXAllData;
          this.childrenData(arrAll, data[0])
        } else {
          this.userGXAllData = data;
          this.userGXData = data[0];
        }
        this.loading = false;
      }).catch(res => {
        this.loading = false;
        this.$message.error(res.msg);
      })
    },
    childrenData(arrAll, data) {
      this.traverse(arrAll, data)
    },
    traverse(arrAll, data) {
      for (let i = 0; i < arrAll.length; i++) {
        console.log(arrAll[i].id.toString(), data.id.toString())
        if (arrAll[i].id.toString() === data.id.toString()) {
          console.log('找到相同id')
          arrAll[i].children = data.children;
          console.log('新的userGXData==》', arrAll)
          //this.userGXAllData = arrAll;
          return;
        }
        if (arrAll[i].children && arrAll[i].children.length > 0) {
          this.traverse(arrAll[i].children, data)
        }
      }
    },
    renderContent(h, data) {
      if (data.id) {
        return (
          <div>
            <div className="ReNode" style="min-width: 140px;text-align: left;">
              <div className="ReNodeAbout" style="">昵称：{data.name} - {data.id}</div>
              <div className="ReNodeAbout" style="">电话：{data.phone}</div>
              <div className="ReNodeAbout" style="">总收益：{data.brokerage}</div>
            </div>
            <div style="text-align: right; margin:6" slot="reference">
              <a onclick={(v) => this.selectLevel(v, data)}>查看下级</a>
            </div>

          </div>
        )
      } else {
        return (
          <div>
            {data.name}
          </div>
        )
      }

    },

    selectChild(v, data) {
      console.log('selectChild==', data)
      this.$refs.stock.modals = true;
      this.$refs.stock.userChildBillAttrs(data);
    },
    selectLevel(v, data) {
      console.log('selectLevel==', data)
      if (data.id) {
        this.getList(1, data.id)
      }
    },
    handleClose() {
      this.dialogVisible = false;
    },

  }
}
</script>
<style lang="less" scoped>
.node-data {
  text-align: center;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: auto;
}

.utree {
  .ReNode {
    border: 1px solid red;
  }
}


</style>